<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    label-width="120px"
    label-position="left"
    v-loading="formLoading"
    class="project_create"
    :inline="true"
  >
    <el-form-item label="项目" prop="projectId">
      <el-select
        v-model="formData.projectId"
        filterable
        placeholder="请选择项目"
        style="width: 200px"
      >
        <el-option
          v-for="dict in data.projectList"
          :key="dict.id"
          :label="dict.name"
          :value="dict.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="预算周期" prop="budgetPeriod">
      <el-input v-model="formData.budgetPeriod" style="width: 200px" />
    </el-form-item>
    <el-form-item label="预算类型" prop="budgetType">
      <el-input v-model="formData.budgetType" style="width: 200px" />
    </el-form-item>
    <el-form-item label="预算金额" prop="budgetAmount">
      <el-input v-model="formData.budgetAmount" style="width: 200px" />
    </el-form-item>
    <el-form-item label="预算金额" prop="approvalStatus">
      <el-input-number v-model="formData.approvalStatus" style="width: 200px" />
    </el-form-item>
    <el-col :push="10">
      <el-form-item>
        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      </el-form-item>
    </el-col>
  </el-form>
</template>
<script lang="ts" setup>
  import { addBudget } from '/@/api/backs/workFlow/budget';
  import { projectSimple } from '/@/api/backs/foundation/foundation';
  import { useTagsViewStore } from '/@/store/modules/tagsView';
  import { message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { ref, reactive, unref } from 'vue';
  import { addleave } from '/@/api/backs/workFlow/leave';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { getToken } from '/@/utils/auth';
  const { closeCurrent } = useTabs();
  defineOptions({ name: 'BpmOALeaveCreate' });
  const data = reactive({
    projectList: [],
  });
  projectSimple().then((res) => {
    data.projectList = res;
  });
  const { delView } = useTagsViewStore(); // 视图操作
  const { currentRoute } = useRouter(); // 路由
  const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formData = ref({});
  const formRules = reactive({
    projectId: [{ required: true, message: '不能为空', trigger: 'change' }],
    budgetPeriod: [{ required: true, message: '不能为空', trigger: 'blur' }],
    budgetType: [{ required: true, message: '不能为空', trigger: 'blur' }],
    budgetAmount: [{ required: true, message: '不能为空', trigger: 'blur' }],
    approvalStatus: [{ required: true, message: '不能为空', trigger: 'blur' }],
  });
  const formRef = ref(); // 表单 Ref
  /** 提交表单 */
  const submitForm = async () => {
    // 校验表单
    if (!formRef.value) return;
    const valid = await formRef.value.validate();
    if (!valid) return;
    // 提交请求
    formLoading.value = true;
    try {
      const data = formData.value;
      await addBudget(data);
      closeCurrent();
      message.success('发起成功');
      // 关闭当前 Tab
      delView(unref(currentRoute));
    } finally {
      formLoading.value = false;
    }
  };
</script>
<style lang="less">
  .project_create {
    padding: 16px;
    width: 50%;
    min-width: 800px;
  }
</style>
